<template>
	<div>
		<div v-for="(value, key) in data" :key="key">
			<div v-if="isObject(value) == 'string' && key != 'remark'">
				<!-- <p style="margin-top: 10px;" >{{ key }}</p> -->
				<Title :title='key'></Title>
				<van-field :value="value" :placeholder="`请输入${key}`" type="textarea" autosize :border="true"
					input-align="left" @change="handleChange(key, $event)" />
			</div>
			<div v-if="isObject(value) == 'array'">
				<div v-for="(item, index) in value" :key="index">
					<div style="display: flex;align-items: center;justify-content: space-between;">
						<Title :title="`${key} ${(index + 1) < 10 ? '0' + (index + 1) : index + 1}`"></Title>
						<div>
							<van-tag plain type="success">
								<van-icon v-slot:add name="plus" @click="addArray(key , value , index)" />
							</van-tag>
							<van-tag plain type="success" style="margin-left: 8px;">
								<van-icon v-slot:del name="minus" @click="delArray(key , value , index)" />
							</van-tag>
						</div>
					</div>
					<div style="padding: 0 10px;box-sizing: border-box;font-size: 12px;">
						<RecursiveRenderer :data="item" @input-change="handleArrayChange(key, index, $event , value)"
							@addArray="handle_add_array($event , index , key)"
							@delArray='handle_del_array($event , index , key)' />
					</div>
				</div>
			</div>
			<div v-if="isObject(value) == 'object'">
				<RecursiveRenderer :data="value" @input-change="handleObjectChange(key, $event)" />
			</div>
		</div>
	</div>
</template>

<script>
	import RecursiveRenderer from "./RecursiveRenderer.vue"
	import Title from "./Title.vue"
	export default {
		name: 'RecursiveRenderer',
		props: {
			data: {
				type: Object,
				required: true
			},
			isShowTitle: {
				type: Boolean,
				required: false,
				default: () => {
					return true
				}
			}
		},

		components: {
			Title,
			RecursiveRenderer
		},
		methods: {
			handleChange(key, event) {
				this.$emit('input-change', {
					key,
					value: event.detail
				});
			},

			handleObjectChange(parentKey, event) {
				this.$emit('input-change', {
					key: parentKey,
					type: 'object',
					changes: event
				});
				// 注意：这里的 event 可能需要根据你的 changeInput 方法进行调整，因为它现在是一个递归结构。
				// 你可能需要在父组件中处理这个 nested case，以正确地更新数据。
			},

			handleArrayChange(parentKey, index, event) {
				this.$emit('input-change', {
					key: `${parentKey}`,
					index: index, //序号
					changes: event,
					type: 'array',
				});
			},

			addArray(key, arr, index) {
				this.$emit("addArray", {
					key: key,
					data: arr[0],
					index: index
				})
			},

			handle_add_array(e, index, key) {
				console.log(key, 'key');
				e.fatherKey = key
				e.fatherIndex = index
				this.$emit("addArray", e)
			},

			delArray(key, arr, index) {
				this.$emit("delArray", {
					key: key,
					data: arr[0],
					index: index
				})
			},

			handle_del_array(e, index, key) {
				console.log(key, 'key');
				e.fatherKey = key
				e.fatherIndex = index
				this.$emit("delArray", e)
			},

			// 判断数据类型
			isObject(value) {
				if (Array.isArray(value)) {
					return 'array';
				} else if (value !== null && typeof value === 'object') {
					return 'object';
				} else {
					return 'string'; // 或者可以返回 'primitive' 以表示基本类型
				}
			},
		}
	}
</script>